<template>
	<view>
		<view class="webkit list">
			<view class="left">订单编号</view>
			<view class="flex" style="text-align: right;" v-cloak> {{ordersn}}</view>
		</view>
		<view class="webkit list">
			<view class="left">订单总金额</view>
			<view class="flex" style="text-align: right;color: #f55;" v-cloak>￥{{price}} <text v-if="jfdk>0">+{{jfdk}}余额</text></view>
		</view>
		<view class="webkit list" v-if="jfdk>0">
			<view class="left">订单总余额</view>
			<view class="flex" style="text-align: right;color: #f55;" v-cloak>{{jfdk}}</view>
		</view>
		<!-- <view class="webkit list">
			<view class="left">最终支付</view>
			<view class="flex">
				<rich-text :nodes="str"></rich-text>
			</view>
		</view> -->
		
		<!-- #ifdef H5 -->
			<!-- <view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;background-color: #fff;margin-top: 10upx;" @click="wxh5pay">
				<view style="width: 160upx;position: relative;">
					<image src="../../../static/weixindenglu_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
					<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
				</view>
				<view style="width: 500upx;margin-left: 30upx;margin-top: 15upx;">
					<view style="height: 70upx;font-size: 36upx;font-weight: 555;">微信支付</view>
					<view style="height: 70upx;color: #ccc;">微信安全支付</view>
				</view>
			</view> -->
		<!-- #endif -->
			<!-- <view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;background-color: #fff;margin-top: 10upx;" @click="zfbPay">
				<view style="width: 160upx;position: relative;">
					<image src="../../../static/zfb.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
					<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
				</view>
				<view style="width: 500upx;margin-left: 30upx;">
					<view style="height: 70upx;font-size: 36upx;font-weight: 555;margin-top: 15upx;">支付宝支付</view>
					<view style="height: 70upx;color: #ccc;">支付宝安全支付</view>
				</view>
			</view> -->
		
			<view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;background-color: #fff;margin-top: 10upx;" @click="weiXinPay" >
				<view style="width: 160upx;position: relative;">
					<image src="../../../static/weixindenglu_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
					<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
				</view>
				<view style="width: 500upx;margin-left: 30upx;margin-top: 15upx;">
					<view style="height: 70upx;font-size: 36upx;font-weight: 555;">微信支付</view>
					<view style="height: 70upx;color: #ccc;">微信安全支付</view>
				</view>
			</view>
		
		<!-- <view style="height: 140upx;display: flex;background-color: #fff;margin-top: 9upx;" @click="submit">
			<view style="width: 160upx;position: relative;">
				<image src="../../../static/yue_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
				<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
			</view>
			<view style="width: 500upx;margin-left: 30upx;margin-top: 15upx;">
				<view style="height: 70upx;font-size: 36upx;font-weight: 555;">余额支付</view>
				<view style="height: 70upx;color: #ccc;">当前余额:<text style="color: #FF3333;padding-left: 20upx;">{{credit2}}</text></view>
			</view>
		</view> -->
		<!-- <view v-if="fuxiao>0" style="height: 140upx;display: flex;background-color: #fff;margin-top: 9upx;" @click="submit1">
			<view style="width: 160upx;position: relative;">
				<image src="../../../static/yue_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
				<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
			</view>
			<view style="width: 500upx;margin-left: 30upx;margin-top: 15upx;">
				<view style="height: 70upx;font-size: 36upx;font-weight: 555;">复销余额支付</view>
				<view style="height: 70upx;color: #ccc;">当前复销余额:<text style="color: #FF3333;padding-left: 20upx;">{{fuxiao}}</text></view>
			</view>
		</view> -->
		<view v-if="duli>0" style="height: 140upx;display: flex;background-color: #fff;margin-top: 9upx;" @click="submit2">
			<view style="width: 160upx;position: relative;">
				<image src="../../../static/yue_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
				<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
			</view>
			<view style="width: 500upx;margin-left: 30upx;margin-top: 15upx;">
				<view style="height: 70upx;font-size: 36upx;font-weight: 555;">独立余额支付</view>
				<view style="height: 70upx;color: #ccc;">当前独立余额:<text style="color: #FF3333;padding-left: 20upx;">{{duli}}</text></view>
			</view>
		</view>
		
		<!-- <view style="height: 140upx;display: flex;background-color: #fff;margin-top: 9upx;" @click="submit_sh" v-if="merchid>0">
			<view style="width: 160upx;position: relative;">
				<image src="../../../static/yue_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
				<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
			</view>
			<view style="width: 500upx;margin-left: 30upx;margin-top: 15upx;">
				<view style="height: 70upx;font-size: 36upx;font-weight: 555;">商户余额支付</view>
				<view style="height: 70upx;color: #ccc;">当前余额:<text style="color: #FF3333;padding-left: 20upx;">{{merch_credit2}}</text></view>
			</view>
		</view> -->
		<view class="webkit list" v-for="(item,i) in res.coins" :key="i">
			<view class="left" v-cloak>{{item.coinname}}剩余数量</view>
			<view class="flex" style="text-align: right;" v-cloak>{{item.pirce}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj:{},
				res:[],
				ordersn:'',
				price:'',
				str:'',
				credit2:'',
				fuxiao:'',
				duli:'',
				openid:"",
				orderid:"",
				openid1:'',
				title:'',
				chongzhi: '',
				merchid: '',
				merch_credit2: '',
				jfdk: '',
			};
		},
		onLoad:function(e){
			uni.showLoading()
			this.orderid = e.id
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay&app=1',
					method: 'POST',
					data: {
						'openid':this.openid,
						'id':this.orderid
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						uni.hideLoading()
						this.ordersn = res.data.order.ordersn
						this.openid1 = res.data.member.openid1
						this.openid = res.data.member.openid
						this.fuxiao = res.data.member.fuxiao
						this.duli = res.data.member.duli
						this.jfdk = res.data.order.jfdk
						this.title = res.data.title
						this.res = res.data
						this.merchid = res.data.merchid
						this.chongzhi = res.data.chongzhi
						this.merch_credit2 = res.data.merch_credit2
						this.jfdk = res.data.order.jfdk
						this.str = '<p style="text-align: right;color: #f55;">'+res.data.str+"</p>"
						this.credit2 = Number(res.data.member.credit2).toFixed(2)
						if(res.data.ispeerpay != ''&& res.data.ispeerpay != false){
							this.price = res.data.peerprice.toFixed(2)
						}else{
							this.price = res.data.order.price.toFixed(2)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			weiXinPay(){
				// 请求后台数据 prepay_id paySign nonceStr timeStamp
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.wechatpay&price=' + this.price + '&goodstitle=' + this.title + '&out_trade_no=' + this.ordersn + '&app=1',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						// 调起支付
						console.log(res)
						var userinfo = res.data
						var _this = this
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: userinfo, //订单数据
							success: function(res) {
								console.log('支付成功----------------------')
								console.log(res)
								setTimeout(function() {
									_this.alipaymoney()
								}, 10);
							},
							fail: function(err) {
								console.log(err)
								console.log('支付失败----------------------')
								return
							}
						});
					}
				});
			},
			zfbPay(){
				var o = this
				if (this.res.member.alipay_id == null 
						|| this.res.member.alipay_username == null 
						|| this.res.member.alipay_username == undefined
						|| this.res.member.alipay_id == undefined
						|| this.res.member.alipay_id == ''
						|| this.res.member.alipay_username == ''
						) {
					uni.showToast({
						title: '您需要完善您的支付宝账号',
						icon: 'none'
					})
					setTimeout(()=> {
						uni.navigateTo({
							url: './zfbmsg?id=' + o.orderid
						})
					},1000)
					return
				}
				//请求后台数据 prepay_id paySign nonceStr timeStamp
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.alipay&out_trade_no=' + this.ordersn + '&total_amount=' + this.price + '&goodstitle=' + this.title + '&app=1',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						console.log(res.data)
						this.userinfo = res.data
						// 调起支付
						var userinfo = this.userinfo
						var _this = this
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: userinfo, //订单数据
							success: function(res) {
								console.log('支付成功----------------------')
								console.log(res)
								setTimeout(function() {
									_this.alipaymoney()
								}, 10);
							},
							fail: function(err) {
								console.log(err)
								console.log('支付失败----------------------')
								return
							}
						});
					}
				});
			},
			alipaymoney(){
				uni.navigateTo({
					url: 'success/success?id='+this.orderid+'&result='+ 'sure'
				});
			},
			jump(){
				var k = this.res.creditbuzu;
				console.log(k)
				if(k == 'credit'){
					uni.navigateTo({
						url: '../../coin/recharge'
					});
				}else{
					uni.navigateTo({
						url: '../../coin/detail/detail?coin='+k
					});
					
				}
			},
			submit(){
				if (Number(this.credit2)<this.price) {
					uni.showModal({
						content: "余额不足",
						confirmText: "确定",
					})
					return
				}
				uni.showModal({
					content: "确认要支付吗？",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if(res.confirm){
							uni.request({
								url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
								method: 'POST',
								data: {
									openid:this.openid,
									id:this.orderid,
									type:'credit',
								},
								header:{'Content-Type':'application/x-www-form-urlencoded'},
								success: res => {
									uni.request({
										url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
										method: 'POST',
										data: {
											openid:this.openid,
											id:this.orderid,
											type:'credit',
										},
										header:{'Content-Type':'application/x-www-form-urlencoded'},
										success: res => {
											console.log(res)
											uni.showToast({
												title:res.data.result.message,
												icon:'none'
											})
											if(res.data.status==1){
												uni.navigateTo({
													url: 'success/success?id='+this.orderid+'&result='+res.data.result.result
												});
											}
											
										},
										fail: () => {},
										complete: () => {}
									});
								},
								fail: () => {},
								complete: () => {}
							});
						}
					},
				})
			},
			submit1(){
				if (Number(this.fuxiao)<this.price) {
					uni.showModal({
						content: "复销余额不足",
						confirmText: "确定",
					})
					return
				}
				uni.showModal({
					content: "确认要支付吗？",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if(res.confirm){
							uni.request({
								url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
								method: 'POST',
								data: {
									openid:this.openid,
									id:this.orderid,
									type:'fuxiao',
								},
								header:{'Content-Type':'application/x-www-form-urlencoded'},
								success: res => {
									uni.request({
										url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
										method: 'POST',
										data: {
											openid:this.openid,
											id:this.orderid,
											type:'fuxiao',
										},
										header:{'Content-Type':'application/x-www-form-urlencoded'},
										success: res => {
											
											console.log(res)
											uni.navigateTo({
												url: 'success/success?id='+this.orderid+'&result='+res.data.result.result
											});
											setTimeout(function() {
												uni.showModal({
													content: "支付成功",
													confirmText: "确定",
												})
											}, 1000);
										},
										fail: () => {},
										complete: () => {}
									});
								},
								fail: () => {},
								complete: () => {}
							});
						}
					},
				})
			},
			submit2(){
				if (Number(this.duli)<this.price) {
					uni.showModal({
						content: "独立余额不足",
						confirmText: "确定",
					})
					return
				}
				uni.showModal({
					content: "确认要支付吗？",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if(res.confirm){
							uni.request({
								url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
								method: 'POST',
								data: {
									openid:this.openid,
									id:this.orderid,
									type:'duli',
								},
								header:{'Content-Type':'application/x-www-form-urlencoded'},
								success: res => {
									uni.request({
										url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
										method: 'POST',
										data: {
											openid:this.openid,
											id:this.orderid,
											type:'duli',
										},
										header:{'Content-Type':'application/x-www-form-urlencoded'},
										success: res => {
											
											console.log(res)
											uni.navigateTo({
												url: 'success/success?id='+this.orderid+'&result='+res.data.result.result
											});
											setTimeout(function() {
												uni.showModal({
													content: "支付成功",
													confirmText: "确定",
												})
											}, 1000);
										},
										fail: () => {},
										complete: () => {}
									});
								},
								fail: () => {},
								complete: () => {}
							});
						}
					},
				})
			},
			wxh5pay:function(){
				if( this.openid1 == '' || this.openid1 == null){
					let oppid = this.openid
					uni.showModal({
						title: '提示',
						content: '微信支付授权',
						success: function (res) {
							if (res.confirm) {
								window.location.href = 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.jspay.getOpenid&openid='+ oppid
								uni.showToast({
									title:'授权成功请支付',
									icon:'none'
								})
							} else {
								console.log('用户点击取消')
							}
						}
					});
				} else {
					uni.request({
						url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.jspay&app=1', // 正常支付流程
						method: 'GET',
						data: {
							'openid':this.openid1,
							'SetBody':this.title,
							'trade_no':this.ordersn,
							'Total_fee':this.price
						},
						header:{'Content-Type': 'application/x-www-form-urlencoded'},
						success: res => {
							this.obj = res.data
							this.jsApiCall()
						},
						fail: () => {},
						complete: () => {}
					})
				}
			},
			submit_sh(){
				var that = this
				if (Number(this.chongzhi) == 1) {
					uni.showModal({
						content: "余额不足,请充值",
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
									uni.navigateTo({
										url: './charge/charge?merchid=' + that.merchid // 进入余额充值页面
									});
							}
						}
					})
					return
				}
				uni.showModal({
					content: "确认要支付吗？",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if(res.confirm){
							uni.request({
								url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
								method: 'POST',
								data: {
									openid:this.openid,
									id:this.orderid,
									type:'merch_credit2',
								},
								header:{'Content-Type':'application/x-www-form-urlencoded'},
								success: res => {
									uni.request({
										url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
										method: 'POST',
										data: {
											openid:this.openid,
											id:this.orderid,
											type:'merch_credit2',
										},
										header:{'Content-Type':'application/x-www-form-urlencoded'},
										success: res => {
											uni.navigateTo({
												url: 'success/success?id='+this.orderid+'&result='+res.data.result.result
											});
											setTimeout(function() {
												uni.showModal({
													content: "支付成功",
													confirmText: "确定",
												})
											}, 1000);
										},
										fail: () => {},
										complete: () => {}
									});
								},
								fail: () => {},
								complete: () => {}
							});
						}
					},
				})
			},
			jsApiCall:function(){
				let orderid = this.orderid
				WeixinJSBridge.invoke( // 调起微信支付
					'getBrandWCPayRequest',
					this.obj,
					function(res){
						// 根据状态改跳转状态
						if(res.err_msg == "get_brand_wcpay_request:ok" ){
						  uni.navigateTo({
						  	url: './success/success?id='+orderid
						  });
						}
					}
				);
			}
		}
	}
</script>

<style>
.list{    
	  padding: 20upx 24upx;
    border-top: 1px solid #e4e4e4;
    background: #fff;}
.list .left{
	color: #666;
}
</style>
